<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>储值赠送</title>
		<!-- Bootstrap -->
		<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
		<link href="fonts/iconfont.css" rel="stylesheet">
		<link href="../assets/css/style.css" rel="stylesheet" />
		<link href="../assets/css/tabletable.css" rel="stylesheet" />
		<link href="../assets/css/content.css" rel="stylesheet" />
		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
		      <script src="../assets/js/html5shiv.min.js"></script>
		      <script src="../assets/js/respond.min.js"></script>
		      <![endif]-->
		<style type="text/css">
			.bordernone{
			  border:none
			}
			.jy_table_list_row_fater{
			  padding: 0 15px;
			}
		</style>
	</head>

	<body>
		<!--内容区域-->
		<div class="content">
			<div class="content-header col-md-12">
				<div class="con-header">
					<div class="col-md-10 col-sm-10 col-xs-10">
						<span class="content-title-pre"></span><span class="content-title-word">积分交易记录记录</span>
					</div>
				</div>
			</div>
			<div class="timeflbody">
				<div class="row jy_table_list_row_fater">
					<div class="jy_table_list col-md-12 mt20">
						<ul>
							<li class="active">订单概况</li>
							<li>菜品明细</li>
							<li>收银明细</li>
							<li>用餐人员</li>
							<div class="clear"></div>
						</ul>
					</div>
				</div>
				<div class="jy_contet_list bordernone">
					<div class="row"></div>
					<div class="table-responsive">
						<table class="table responsive jifenjiaoyijilu-table" id="mytable">
							<tbody class="mytable table1">
								<tr>
									<td>
										<div class="jfjyjl-gk-left">
											<span>单号   000999888</span>
											<span>桌位   000999888</span>
										</div>
										<div class="jfjyjl-gk-right">
											<span>下单时间   2016-11-01 01:47</span>
											<span>结算时间   2016-11-01 01:47</span>
										</div>
									</td>
								</tr>
								<tr>
									<td>金额：4990元</td>
								</tr>
								<tr>
									<td>菜品数：17份</td>
								</tr>
								<tr>
									<td>人数：11人</td>
								</tr>
								<tr>
									<td>赠送：8份</td>
								</tr>

								<tr>
									<td>人均：871元</td>
								</tr>

								<tr>
									<td>退菜：0份</td>
								</tr>

							</tbody>
						</table>
					</div>
				</div>
				<div class="jy_contet_list hidden bordernone">
					<div class="table-responsive mt20">
						<table class="table">
							<thead class="tablethead">
								<tr>
									<th class="firstth" valign="middle">序号</th>
									<th class="secondta">菜品</th>
									<th>份数</th>
									<th>单价</th>
									<th>原价</th>
									<th>小计</th>
									<th>时间</th>
								</tr>
							</thead>
							<tbody class="mytable">
								<tr>
									<td class="firsttd" valign="middle">01</td>
									<td class="secondta">干炸蘑菇</td>
									<td>2</td>
									<td>14</td>
									<td>14</td>
									<td>14</td>
									<td>2016-11-13 09:08:07</td>
								</tr>
								<tr>
									<td class="firsttd" valign="middle">01</td>
									<td class="secondta">干炸蘑菇</td>
									<td>2</td>
									<td>14</td>
									<td>14</td>
									<td>14</td>
									<td>2016-11-13 09:08:07</td>
								</tr>
								<tr>
									<td class="firsttd" valign="middle">01</td>
									<td class="secondta">干炸蘑菇</td>
									<td>2</td>
									<td>14</td>
									<td>14</td>
									<td>14</td>
									<td>2016-11-13 09:08:07</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="paging col-md-6 col-md-offset-6 col-sm-12 col-xs-12 text-right">
						<div class="page-page flr">
							<ul class="pagination">
								<li class="epage">
									<a href="#">上一页</a>
								</li>
								<li class="active">
									<a href="#">1 <span class="sr-only">(current)</span></a>
								</li>
								<li>
									<a href="#">2</a>
								</li>
								<li>
									<a href="#">3</a>
								</li>
								<!--<li><a href="#">4</a></li>-->
								<li>
									<a href="#">...</a>
								</li>
								<li class="epage">
									<a href="#">下一页</a>
								</li>
							</ul>
						</div>
						<div class="page-num flr">共9页，每页10条</div>
					</div>
				</div>
				<div class="jy_contet_list hidden bordernone jfjyjl-symx mt0">
					<div class="jfjyjl-symx-con">
						<div class="content-item">
							<span>结算一：金额164.00元</span>
							<span>收银时间：2016-11-10 12：37</span>
							<span>操作员：徐立新</span>
						</div>
					</div>
					<div class="table-responsive mt20">
						<table class="table">
							<thead class="tablethead">
								<tr>
									<th class="firstth" valign="middle">支付方式</th>
									<th class="secondta">支付金额</th>
									<th>支付时间</th>
									<th>操作员</th>
									<th>收银员</th>
									<th>时间</th>
								</tr>
							</thead>
							<tbody class="mytable">
								<tr>
									<td class="firsttd" valign="middle">支付宝</td>
									<td class="secondta">31</td>
									<td>2016-11-13 09:08:07</td>
									<td>091</td>
									<td>091</td>
									<td>2016-11-13 09:08:07</td>
								</tr>
								<tr>
									<td class="firsttd" valign="middle">支付宝</td>
									<td class="secondta">31</td>
									<td>2016-11-13 09:08:07</td>
									<td>091</td>
									<td>091</td>
									<td>2016-11-13 09:08:07</td>
								</tr>
								<tr>
									<td class="firsttd" valign="middle">支付宝</td>
									<td class="secondta">31</td>
									<td>2016-11-13 09:08:07</td>
									<td>091</td>
									<td>091</td>
									<td>2016-11-13 09:08:07</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="paging col-md-6 col-md-offset-6 col-sm-12 col-xs-12 text-right">
						<div class="page-page flr">
							<ul class="pagination">
								<li class="epage">
									<a href="#">上一页</a>
								</li>
								<li class="active">
									<a href="#">1 <span class="sr-only">(current)</span></a>
								</li>
								<li>
									<a href="#">2</a>
								</li>
								<li>
									<a href="#">3</a>
								</li>
								<!--<li><a href="#">4</a></li>-->
								<li>
									<a href="#">...</a>
								</li>
								<li class="epage">
									<a href="#">下一页</a>
								</li>
							</ul>
						</div>
						<div class="page-num flr">共9页，每页10条</div>
					</div>
				</div>
				<div class="jy_contet_list hidden jfjyjl-ycry bordernone mt0">
					<div class="jfjyjl-symx-con">
						<div class="content-item">
							<span>结算一：金额164.00元</span>
							<span>收银时间：2016-11-10 12：37</span>
							<span>操作员：徐立新</span>
						</div>
					</div>
					<div class="table-responsive mt20">
						<table class="table">
							<thead class="tablethead">
								<tr>
									<th class="firstth" valign="middle">序号</th>
									<th class="secondta">头像</th>
									<th>昵称</th>
									<th>姓名</th>
									<th>储值卡</th>
									<th>卡券</th>
								</tr>
							</thead>
							<tbody class="mytable">
								<tr>
									<td class="firsttd" valign="middle">01</td>
									<td class="secondta">
										<img src="../assets/images/20150805133816_X8zCQ.thumb.700_0.jpeg" class="jfjyjl-ycry-rytx" />
									</td>
									<td>小麦包</td>
									<td>张三</td>
									<td>091</td>
									<td>2016-11-13 09:08:07</td>
								</tr>
								<tr>
									<td class="firsttd" valign="middle">01</td>
									<td class="secondta">
										<img src="../assets/images/20150805133816_X8zCQ.thumb.700_0.jpeg" class="jfjyjl-ycry-rytx" />
									</td>
									<td>小麦包</td>
									<td>张三</td>
									<td>091</td>
									<td>2016-11-13 09:08:07</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="paging col-md-6 col-md-offset-6 col-sm-12 col-xs-12 text-right">
						<div class="page-page flr">
							<ul class="pagination">
								<li class="epage">
									<a href="#">上一页</a>
								</li>
								<li class="active">
									<a href="#">1 <span class="sr-only">(current)</span></a>
								</li>
								<li>
									<a href="#">2</a>
								</li>
								<li>
									<a href="#">3</a>
								</li>
								<!--<li><a href="#">4</a></li>-->
								<li>
									<a href="#">...</a>
								</li>
								<li class="epage">
									<a href="#">下一页</a>
								</li>
							</ul>
						</div>
						<div class="page-num flr">共9页，每页10条</div>
					</div>
				</div>

			</div>

			<script src="../assets/js/jquery.min.js"></script>
			<script src="../assets/js/bootstrap.min.js"></script>
			<script type="text/javascript">
				colorStyle();
        // 给奇数行和偶数行不同的颜色
        function colorStyle(){
          $(".mytable").find("tr:even").addClass("oushu");
          $(".mytable").find("tr:odd").addClass("jishu");
          $(".mytable").find("tr:odd td:first-child").addClass("jishu");
        }
  
        // 给第一列高度
        firstTrHeight()
        function firstTrHeight() {
          for(var i = $(".mytable tr").length - 1; i >= 0; i--) {
            var trht = $(".mytable tr")[i].offsetHeight
            var domtr = $(".mytable tr")[i];
            // 有30px的边距
            $(domtr).children('td').height(trht - 30);
            $(domtr).children('.firsttd').css('line-height', trht - 30 + 'px');
          };
        }
				// table切换选中第几个下面的第几个div显现
				$('.jy_table_list ul li').on('click', function() {
					var index = $(this).index();
					$('.jy_table_list ul li').removeClass("active")
					$('.jy_table_list ul li').eq(index).addClass("active")
					$('.jy_contet_list').addClass('hidden')
					$('.jy_contet_list').eq(index).removeClass("hidden")
					firstTrHeight();
				})
			</script>
	</body>

</html>